<template>
	<div class="img-group">
		<el-row v-for="(item,index) in myValue" :key="index" class="coach-item">
	    <!--<el-col :span="4" class="coach-img">
	      <img-upload v-model="item.coachItems" class="logo-upload"/>
	    </el-col>-->
	    <el-col :span="20" class="coach-info mod-input">
	      <el-form-item :label="label1" label-width="107px">
	        <el-col :span="18">
            <el-col :span="14">
              <el-input :value="item" :placeholder="placeholder1" @change="handleChangeInput"></el-input>
            </el-col>
            <el-col :span="10" class="del-coach">
              <i class="el-icon-close" v-if="index!==0" @click="handleRemove(index)"></i>
            </el-col>
          </el-col>
	      </el-form-item>
	      <el-form-item :label="label2" label-width="107px">
	        <el-col :span="18">
              <el-input type="textarea" :placeholder="placeholder2" :value="item" @change="handleChangeText"/>
	        </el-col>
	      </el-form-item>
	    </el-col>
      <el-col :span="24">
        <el-button v-if="index===0" @click="handleAdd(index)" :disabled="max <= myValue.length || disabled">添加</el-button>
      </el-col>
	  </el-row>
	</div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Array
      },
      disabled: {
        type: Boolean,
        default: false
      },
      max: {
        type: Number
      },
      label1: {
        type: String,
        default: '姓名：'
      },
      label2: {
        type: String,
        default: '简介：'
      },
      placeholder1: {
        type: String,
        default: '请输入教练姓名'
      },
      placeholder2: {
        type: String,
        default: '请输入教练简介'
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = []
      }
      return {
        myValue
      }
    },
    methods: {
      handleChangeInput (value) {
        this.myValue[this.$currentIndex] = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleChangeText (value) {
        this.myValue[this.$currentIndex] = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd () {
        this.myValue.push('')
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      }
    }
  }
</script>

<style lang='scss'>
  .coach-info {
      .el-form-item {
          margin-bottom: 20px;
      }
      .del-coach{
        text-align:right;
        i{
          color:#bbb;
          &:hover{
            cursor:pointer;
            color:#ccc;
          }
        }
      }
  }
  .coach-img {
    .img-upload {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50%;
        border: 1px dashed #d2d2d2;
        & :hover {
            border-color: #00bb90;
        }
    }
    .avatar-uploader-icon {
        width: 100px;
        height: 100px;
        line-height: 100px;
        background: #fafafa;
        font-size: 24px;
        border-radius: 50%;
    }
    .avatar-uploader .el-upload {
        border-radius: 50%;
        & :hover {
            border-color: #00bb90;
        }
    }
}
</style>
